<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS</title>
	<style>
		body{
			margin: 0;
			padding: 0;
		}

		#nav{
			width: 1240px;
			height: 50px;
			margin: 0 auto;
			border: 1px solid red;
		}

		#list{
			float: left;
			margin: 0;
			padding: 0;
		}

		li{
			float: left;
			list-style: none;
			margin-left: 50px;
			width: 150px;
			height: 48px;
			text-align: center;
			line-height: 50px;
		}

		#hidden{
			width: 1240px;
			height: 200px;
            border: 1px solid #999;
            /*position: absolute;*/
            margin: 0 auto;
            display: none;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
		}
	</style>
</head>
<body>
	<div id="nav">
		<ul id="list">
			<li>服装</li>
			<li>服装</li>
			<li>服装</li>
			<li>服装</li>
			<li>服装</li>
			
		</ul>
		<div style="clear:both;"></div>

	</div>
	<div id="hidden"></div>
	<div>dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsadas</div>

	<script>
		var hidden = document.getElementById('hidden');
		var lis = document.getElementsByTagName('li');
		// console.log(li);

        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function (){
                hidden.style.display = 'block';
            }
            //鼠标移走
            lis[i].onmouseout = function (){
                hidden.style.display = 'none';
            }
        }
	</script>
</body>
</html>